<template>
  <view>
  <view class="help-container">

    <view class="list-title">
      <view class="text-title">
        <view class="iconfont icon-github"></view>桃源AI助手
      </view>
    </view>

    <view>
      {{nowDate}} 会话总结

    </view>

    <view class="childList">
      <view v-for="(child, zindex) in taskList" :key="zindex" class="question" hover-class="hover" >
        <view style="display: flex;color: black;width: 90%">
          <view v-if="false"><image @click="handleCheck(child)" v-if="child.isFin==1" src="/static/images/checkbox-1.png" style="width: 40rpx;height: 40rpx;margin-top: 25rpx;margin-left: 15rpx;"></image>
          <image @click="handleCheck(child)" v-if="child.isFin==0" src="/static/images/checkbox-2.png" style="width: 40rpx;height: 40rpx;margin-top: 25rpx;margin-left: 15rpx;"></image>
          </view>
          <view class="text-item" v-if="child.isFin==1" @click="handleDetail(child)"><del>{{ child.taskMemo }}</del></view>
          <view class="text-item" v-if="child.isFin==0" @click="handleDetail(child)">{{ child.taskMemo }}</view>
          <view style="position: absolute;right: 20rpx;"  @click="showDrawer(child)">
            <img style="width: 68rpx;height: 80rpx" src="" />
          </view>
        </view>
        <view style="display: flex;margin-left: 25rpx;margin-bottom: 15rpx;font-size: 21rpx;">
          <view v-if="false">类型:{{ child.taskActions }}</view>
          <!--style="margin-left: 20rpx;"-->
          <view  >时间:{{ parseTime(child.msgtime, '{m}-{d} {h}:{i}') }}</view>
          <view v-if="child.roomid!=''" style="margin-left: 20rpx;">群:{{ child.roomName }}</view>
          <view v-if="child.roomid==''" style="margin-left:20rpx;">私：{{ child.roomName }}</view>

        </view>
        <view class="line" v-if="zindex !== taskList.length - 1"></view>
      </view>
    </view>
    <view style="height: 100rpx">
      <!---->
    </view>

    <div class="todo-list" v-if="false">
      <table>
        <thead>
        <tr>
          <th>序号</th>
          <th>任务简介</th>
          <th>任务类型</th>
          <th>任务时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="expandable" data-id="1">
          <td>1</td>
          <td>任务简介示例</td>
          <td>类型</td>
          <td>2023-05-20 14:00</td>
          <td>
            <button>删除</button>
            <button>修订</button>
            <button>完成</button>
            <button>查看更多</button>
            <button>...</button>
          </td>
        </tr>
        <!-- 展开内容 -->
        <tr class="details" style="display:none;">
          <td colspan="7">
            <div>
              <p><strong>任务特殊字段1:</strong> 示例值</p >
              <p><strong>任务特殊字段2:</strong> 示例值</p >
              <p><strong>任务特殊字段3:</strong> 示例值</p >
              <p><strong>关键字:</strong> 示例</p >
              <p><strong>干系人:</strong> 示例</p >
              <p><strong>地点:</strong> 示例</p >
              <p><strong>数据指标:</strong> 示例</p >
              <p><strong>专业术语:</strong> 示例</p >
              <p><strong>原文:</strong> 示例</p >
            </div>
          </td>
        </tr>
        <!-- 更多任务项... -->
        </tbody>
      </table>
    </div>


    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" >
      <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">

            <view class="example">
              <uni-forms ref="form" :modelValue="todoAI" labelWidth="80px">
                <uni-forms-item label="待办事项" name="todoMemo">
                  <uni-easyinput type="textarea" v-model="todoAI.todoMemo" placeholder="请输入内容" />
                </uni-forms-item>
                <uni-forms-item label="关系人" name="todoUserlist">
                  <uni-easyinput v-model="todoAI.todoUserlist" placeholder="请输入内容" />
                </uni-forms-item>
                <uni-forms-item label="提醒我" name="todoAlertDate">
                  <view>功能开发中</view>
                </uni-forms-item>
              </uni-forms>
              <view style="display: flex;color: black;width: 90%;margin-top: 25rpx;">
                <view style="margin-right: 25rpx;"><image @click="handleTodoCheck()" v-if="todoCheck==1" src="/static/images/checkbox-1.png" style="width: 40rpx;height: 40rpx;margin-left: 15rpx;"></image>
                  <image @click="handleTodoCheck()" v-if="todoCheck==0" src="/static/images/checkbox-2.png" style="width: 40rpx;height: 40rpx;margin-left: 15rpx;"></image>
                </view>
                <view>关联原会话内容</view>
              </view>
              <button type="primary" style="background-color: #4874CB;margin-top: 15rpx;" @click="todoSave">保存</button>
              <button style="margin-top: 15rpx;" @click="$refs.popup.close"><text>关闭</text></button>

            </view>
      </view>
    </uni-popup>

    <uni-popup ref="popup333" background-color="#fff">
      <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">

        <view class="content_list">
          <scroll-view scroll-y="true" class="scroll_view_style">
            <button v-if="false" @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭</text></button>
            <view class="example">
              <view style="margin-top: 15rpx" v-html="replaceNewline(task.orignalMsg)"></view>
              <button type="primary" style="background-color: #4874CB;margin-top: 15rpx;" @click="$refs.popup333.close()">关闭</button>

            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>


    <uni-drawer ref="showRight" mode="right" width=290 :mask-click="true">
      <scroll-view style="height: 100%;margin: 30rpx;width: 90%" scroll-y="true">
        <button @click="toggle('center')" style="margin-top: 20rpx;background-color: #4874CB;color: white;" type="primary">转为待办事项</button>
        <button @click="todo" style="margin-top: 20rpx;background-color: #4874CB;color: white;" type="primary">转发（同事）</button>
        <button @click="toggle333('left')" type="primary" style="background-color: #4874CB;margin-top: 15rpx;">查看原文</button>
        <button @click="taskAddQYWXSchedule" style="margin-top: 20rpx;background-color: #4874CB;color: white;" type="primary">转为日程</button>
        <button @click="todo" style="margin-top: 20rpx;background-color: #4874CB;color: white;" type="primary">转为闹钟</button>
        <button @click="todo" style="margin-top: 20rpx;background-color: #4874CB;color: white;" type="primary">预定会议</button>
        <button @click="closeDrawer" style="margin-top: 20rpx;background-color: gray;color: white;" type="primary">关闭</button>
      </scroll-view>
    </uni-drawer>

    <!--
    <view style="position: fixed;bottom: 10rpx;width: 90%">
      <button style="background-color: #4874CB;color: white;" @click="handleTodoList">进入桃源待办</button>
    </view>-->

    </view>

    <!--
        <view style="position: fixed;display:flex;bottom: 0rpx;width: 100%;text-align: center;background-color: white;font-size: 24rpx;">
          <view ><view><img src="/static/images/tabbar/sign.png" style="width: 50%"/></view><view>待办</view></view>
          <view ><view><img src="/static/images/tabbar/sum.png" style="width: 50%"/></view><view>会话总结</view></view>
          <view ><view><img src="/static/images/tabbar/meeting.png" style="width: 50%"/></view><view>会议纪要</view></view>
          <view ><view><img src="/static/images/tabbar/me.png" style="width: 50%"/></view><view>个人中心</view></view>
        </view>-->
    <tabBar selection="sum" :taskOwner="taskOwner"></tabBar>
</view>
</template>

<script>
  import { taskList,taskEdit,taskAddQYWXSchedule,todoAdd } from "@/api/system/user"
  import TableCheckbox from "../../uni_modules/uni-table/components/uni-tr/table-checkbox";

  import tabBar from '@/components/tabBar';

  export default {
    components: {TableCheckbox,tabBar},
    data() {
      return {
        loadFin: false,
        pageNum: 1,
        pageSize: 20,
        range: [{"value": 0,"text": "篮球"	}],
        list: [{
            icon: 'iconfont icon-github',
            title: '若依问题',
            childList: [{
              title: '若依开源吗？',
              content: '开源'
            }, {
              title: '若依可以商用吗？',
              content: '可以'
            }, {
              title: '若依官网地址多少？',
              content: 'http://ruoyi.vip'
            }, {
              title: '若依文档地址多少？',
              content: 'http://doc.ruoyi.vip'
            }]
          },
          {
            icon: 'iconfont icon-help',
            title: '其他问题',
            childList: [{
              title: '如何退出登录？',
              content: '请点击[我的] - [应用设置] - [退出登录]即可退出登录',
            }, {
              title: '如何修改用户头像？',
              content: '请点击[我的] - [选择头像] - [点击提交]即可更换用户头像',
            }, {
              title: '如何修改登录密码？',
              content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码',
            }]
          }
        ],
        taskList: [],
        taskOwner: '',
        groupId: '',
        nowDate: '',
        task: {},
        todoAI: {},
        todoMemo: '',
        // 表单数据
        formData: {
          todoMemo: '',
          todoUserlist: ''
        },
        todoCheck: 1,
        type: '',
      }
    },
    onLoad() {
      const query = this.$route.query;
      console.log(query); // 输出URL参数对象
      this.taskOwner = query.taskOwner;
      this.groupId = query.groupId;

      //const dateObj = new Date(Number(this.groupId/1000));
      //this.nowDate = dateObj.toLocaleString();
      this.nowDate = this.groupId.substring(0, 4) + "年";
      this.nowDate += this.groupId.substring(4, 6)+ "月";
      this.nowDate += this.groupId.substring(6, 8)+ "日";
      this.nowDate += this.groupId.substring(8, 10)+ "时";

      uni.setStorageSync("ai_groupId", this.groupId);
      this.getAITaskList()
    },
    onPullDownRefresh(){
      //下拉刷新
      this.loadFin = false;
      this.taskList = [];
      this.pageNum = 1;
      this.getAITaskList();
    },
    onReachBottom() {
      //触底加载
      if(this.loadFin){
        //uni.showToast({ title: "已全部加载完毕", icon: 'success' })
      }else{
        //this.pageNum++;
        //this.getAITaskList();
      }
    },
    methods: {
      toggle333(type) {
        this.$refs.showRight.close();
        this.type = type
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup333.open(type)
      },
      replaceNewline(str){
        if(str==null) return str;
        var reg=new RegExp("\n","g");
        str= str.replace(reg,"<br>");
        return str;
      },
      handleTodoCheck(){
        if(this.todoCheck == 1){
          this.todoCheck = 0;
        } else{
          this.todoCheck = 1;
        }
      },
      todoSave(){
        if(this.todoCheck==1){
          //this.todoAI.orignalMsg = this.task.orignalMsg;
          this.todoAI.orignalTaskid = this.task.id;
        }
        this.todoAI.todoOwner = this.taskOwner;
        todoAdd(this.todoAI).then(response => {
          this.$modal.msgSuccess("保存成功")
          this.$refs.popup.close();
        })
      },
    toggle(type) {
      this.$refs.showRight.close();
      this.type = type
      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      this.$refs.popup.open(type)
    },
      handleTodoList(e) {
        this.$tab.navigateTo(`/pages/aitodo/list?taskOwner=${this.taskOwner}&isFin=0&current=1&id=123`)
      },
      todo(){
        this.$modal.msgSuccess("即将上线...")
      },
      taskAddQYWXSchedule(e) {
        this.$refs.showRight.close();
        taskAddQYWXSchedule(this.task).then(response => {
          this.$modal.msgSuccess("企业微信日程创建成功");
        })
      },
      showDrawer(item) {
        this.task = item;
        this.todoAI = item;
        this.todoAI.todoMemo = this.task.taskMemo;
        this.todoAI.todoUserlist = this.task.taskUserlist;

        //this.formData.todoMemo = this.task.taskMemo;
        //this.formData.todoUserlist = this.task.taskUserlist;

        this.todoMemo = this.task.taskMemo;

        console.log(this.todoAI);
        //this.toggle('center');
        this.$refs.showRight.open();
      },
      closeDrawer() {
        this.$refs.showRight.close();
      },
      handleCheck(item){
        if(item.isFin==1){
          item.isFin = 0;
        }else{
          item.isFin = 1;
        }
        let data = {
          id: item.id,
          isFin: item.isFin
        }
        taskEdit(data).then(response => {
          uni.showToast({ title: "操作成功", icon: 'success' })
        })

      },
      handleText(item) {
        this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
      },
      handleDetail(item) {
        this.$tab.navigateTo(`/pages/ai/detail?taskOwner=${this.taskOwner}&groupId=${this.groupId}&id=${item.id}`)
      },
      getAITaskList() {
        let data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          taskOwner: this.taskOwner,
          groupId: this.groupId
        }
        taskList(data).then(response => {
          //判断一下 最后一个id 是不是 和 列表最后一个id一样
          console.log(response.rows);
          console.log(response.rows[response.rows.length-1]);
          if(this.taskList.length >0 && response.rows[response.rows.length-1].id == this.taskList[this.taskList.length-1].id){
            this.loadFin = true;
          } else{
            this.taskList = this.taskList.concat(response.rows);
          }
          uni.stopPullDownRefresh();
        })
      },
      parseTime(time, pattern) {
        if (arguments.length === 0 || !time) {
          return null
        }
        const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
        let date
        if (typeof time === 'object') {
          date = time
        } else {
          if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
          } else if (typeof time === 'string') {
            time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
          }
          if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
          }
          date = new Date(time)
        }
        const formatObj = {
          y: date.getFullYear(),
          m: date.getMonth() + 1,
          d: date.getDate(),
          h: date.getHours(),
          i: date.getMinutes(),
          s: date.getSeconds(),
          a: date.getDay()
        }
        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
          let value = formatObj[key]
          // Note: getDay() returns 0 on Sunday
          if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
          if (result.length > 0 && value < 10) {
            value = '0' + value
          }
          return value || 0
        })
        return time_str
      }

    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f8f8f8;
  }

  .help-container {
    margin-bottom: 100rpx;
    padding: 30rpx;
  }

  .list-title {
    margin-bottom: 30rpx;
  }

  .childList {
    background: #ffffff;
    box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
    border-radius: 16rpx;
    margin-top: 10rpx;
  }

  .line {
    width: 100%;
    height: 1rpx;
    background-color: #F5F5F5;
  }

  .text-title {
    color: #303133;
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 10rpx;

    .iconfont {
      font-size: 16px;
      margin-right: 10rpx;
    }
  }

  .text-item {
    font-size: 28rpx;
    padding: 24rpx;
  }

  .question {
    color: #606266;
    font-size: 28rpx;
  }


  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  @media (max-width: 600px) {
    th, td {
      display: block;
      width: 100%;
    }
    /* 调整移动端显示 */
  }

  .details {
    background-color: #f9f9f9;
  }



  @mixin flex {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  @mixin height {
    /* #ifndef APP-NVUE */
    height: 100%;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
  }

  .box {
    @include flex;
  }

  .button {
    @include flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 35px;
    margin: 0 5px;
    border-radius: 5px;
  }

  .example-body {
    background-color: #fff;
    padding: 10px 0;
  }

  .button-text {
    color: #fff;
    font-size: 12px;
  }
  .popup-content {
    @include flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    height: 50px;
    background-color: #fff;
    width: 95%;
    height: 900rpx;
  }

  .popup-height {
    @include height;
    width: 600rpx;
  }

  .text {
    font-size: 12px;
    color: #333;
  }

  .popup-success {
    color: #fff;
    background-color: #e1f3d8;
  }

  .popup-warn {
    color: #fff;
    background-color: #faecd8;
  }

  .popup-error {
    color: #fff;
    background-color: #fde2e2;
  }

  .popup-info {
    color: #fff;
    background-color: #f2f6fc;
  }

  .success-text {
    color: #09bb07;
  }

  .warn-text {
    color: #e6a23c;
  }

  .error-text {
    color: #f56c6c;
  }

  .info-text {
    color: #909399;
  }

  .dialog,
  .share {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
  }

  .dialog-box {
    padding: 10px;
  }

  .dialog .button,
  .share .button {
    /* #ifndef APP-NVUE */
    width: 100%;
    /* #endif */
    margin: 0;
    margin-top: 10px;
    padding: 3px 0;
    flex: 1;
  }

  .dialog-text {
    font-size: 14px;
    color: #333;
  }

  .content_list {
    height: 1200rpx;
    overflow-x: hidden;
    .scroll_view_style{
      height: 100%;
    }
  }

  </style>
